@import 'reset';

body{
	// font-family: "微软雅黑","Microsoft YaHei";
	// font-size: 14px;
	font: normal 62.5% "微软雅黑", "Microsoft YaHei", Helvetica, sans-serif;
	background-color: #efefef;
	color: #252525;
	width: 100%;
	height: 100%;
}
html,body{
	width:100%;
	height:100%;
	min-height:100%;
	// overflow:hidden;
}
/*清除浮动*/
.clearfix:after{
	content: '';
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom:1;
}


/*zhuanti --begin*/
.gzl_bg{
	width: 100%;
	height: 100%;
	// position: absolute; 
	// left: 0; 
	// top: -500%;
	.next_page{
		width:25%;
		position: absolute;
		bottom:6%;
		left:50%;
		transform:translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	}
	.swiper-container{
		width:100%;
		height:100%;
	}
	.page{
		width:100%;
		height:100%;
		// position: relative;
		// overflow: hidden;	
		position: absolute;
		background:url(../image/bg.jpg) no-repeat top center;
		background-size:100% 100%;	
		// display:none;
	}
	.page_one{
		// display: block;
		z-index: 6;
		.one_bg{
			width:100%;
			height:90%;
			background:url(../image/one_bg.png) no-repeat top center;
			background-size:120%;	
		    margin-top: 10%;
			.prepare_box{
				width:45%;
				position: absolute;
				bottom:10%;
				left:50%;
				transform:translateX(-50%);
				text-align:center;
				.prepare{
					width:60%;
				}
				.inner_oval{
					width:80%;
					position: absolute;
					left:50%;
					top:50%;
					transform:translate(-50%, -50%) scale(1);
				    animation: scalelarge 1.1s infinite ease-in-out;
					-webkit-animation: scalelarge 1.1s infinite ease-in-out;
					-moz-animation: scalelarge 1.1s infinite ease-in-out;
					-o-animation: scalelarge 1.1s infinite ease-in-out;
				}
				.outer_oval{
					position: absolute;
					width:95%;
					left:50%;
					top:50%;
					transform:translate(-50%, -50%) scale(1);
					animation: scalelarge 1.1s infinite ease-in-out;
					-webkit-animation: scalelarge 1.1s infinite ease-in-out;
					-moz-animation: scalelarge 1.1s infinite ease-in-out;
					-o-animation: scalelarge 1.1s infinite ease-in-out;
				}
				.hand{
				    width: 25%;
				    position: absolute;
				    left: 70%;
				    bottom: 0px;
				    transform:translateX(-50%);
				}
			}
		}
		.logo37{
			width:15%;
			position: absolute;
			top: 2%;
			left: 2%;
		}
	}
	.page_one:before{
		content : " ";
		display : table;
	}

	.page_two{
		z-index: 5;
		.loading_box{
			width:100%;
			height: 100%;
			background:url(../image/cloudy.png) no-repeat center 22%;
			background-size:85%;
			.flight{
				display:block;
				width:28%;
				margin: 30% 0 0 50%;
				transform:translateX(-50%);
			}
			.loading_txt{
				width:40%;
				margin: 5% 0 5% 50%;
				transform:translateX(-50%);
			}
			.loading_bar{
				width:84%;
				height:8%;
				margin-left:8%;
		        // margin-top: 78%;
			    position: relative;
			    z-index: 999;
				background:url(../image/loading_bg.png) no-repeat top center;
				background-size:100% 100%;
				.loadding_inner{
					width:10%;
					// height:35px;   98.1%
					height:82%;
				    position: absolute;
				    z-index: 11;
				    left: 0.7%;
				    top:3.5%;
					overflow:hidden;
				    @include border-radius(100px);
				    img{
				    	width:100%;
				    }
				    span{
				    	display:inline-block;
				    	width:100%;
				    	height:100%;
				    	background:url(../image/loading_inner.png) repeat-x bottom center;
						// background-size:100% 100%;
						@include border-radius(100px);
				    }
				}
				.loadding_inner_run{
				    animation: loadingbar 3s linear;
				    -webkit-animation: loadingbar 3s linear;
				    -moz-animation: loadingbar 3s linear;
				    -o-animation: loadingbar 3s linear;
				    -moz-animation: loadingbar 3s linear;				
				}
			}
		}
		.loading_box:before {
		    content : " ";
		    display : table;
		}
	}

	.page_three{
		
		.gender{
			width:80%;
			margin:8% 5% 10%;
		}
		.gender_box{
			width:100%;
			img{
				width:49%;
			}
			.gender_boy{
				float:left;
				margin-left:-1%;
			}
			.gender_girl{
				float:right;
				margin-top:-41%;
				margin-right:-1%;
			}
		}
	}

	.page_four{
		z-index: 4;
		.five_copy{
			width:94%;
			margin:3% 3% 3%;
		}
		.five_choose{
			position: relative;
			left:8%;
			width:84%;
			height:56%;
			// background:url(../image/copy_bg.png) no-repeat top center;
			// background-size:100% 100%;	
			.swiper-wrapper{
				width:96%;
				height:96%;
				position: relative;
				// left:-3%;
			}
			>img{
				width:14%;
				position: absolute;
				top:45%;
				z-index: 9;
				// transform:translateY(-45%);
			}
			.prev{
				left:8%;
				transform:translate(-50%,-50%);		
				-webkit-transform:translate(-50%,-50%);
				-moz-transform:translate(-50%,-50%);
				-o-transform:translate(-50%,-50%);		
			}
			.next{
				right:6%;
				transform:translate(50%,-50%);
				-webkit-transform:translate(50%,-50%);
				-moz-transform:translate(50%,-50%);
				-o-transform:translate(50%,-50%);
			}
			.swiper-button-prev{
				width:14%;
				height: auto;
				background:none;
			}
			.swiper-button-next{
				width:14%;
				height: auto;
				background:none;
			}

		}

		.choose_tip{
			width:50%;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50% ,-50%);
			z-index: 99;
		}


		// .five_choose{
		// 	position: relative;
		// 	left:10%;
		// 	width:80%;
		// 	height:52%;
		// 	background:url(../image/copy_bg.png) no-repeat top center;
		// 	background-size:100% 100%;	
		// 	.swiper-container{
		// 		margin-left: auto;
		// 		margin-right: auto;
		// 		position: relative;
		// 		overflow: hidden;
		// 		z-index: 1;
		// 		.swiper-wrapper{
		// 			width:96%;
		// 			height:96%;
		// 			position: relative;
		// 			z-index: 1;
		// 			display: -webkit-box;
		// 			display: -moz-box;
		// 			display: -ms-flexbox;
		// 			display: -webkit-flex;
		// 			display: flex;
		// 			-webkit-transition-property: -webkit-transform;
		// 			-moz-transition-property: -moz-transform;
		// 			-o-transition-property: -o-transform;
		// 			-ms-transition-property: -ms-transform;
		// 			transition-property: transform;
		// 			-webkit-box-sizing: content-box;
		// 			-moz-box-sizing: content-box;
		// 			box-sizing: content-box;
		// 			.swiper-slide{
		// 				width:100%;
		// 				height:100%;
		// 				// position: absolute;
		// 				// left:0px;
		// 				// top:0px;
		// 				// // overflow: hidden;
		// 				// display:none;
		// 				-webkit-flex-shrink: 0;
		// 				-ms-flex: 0 0 auto;
		// 				flex-shrink: 0;
		// 				width: 100%;
		// 				height: 100%;
		// 				position: relative;
		// 				img{
		// 					// width:100%;
		// 					height:100%;
		// 				}
		// 			}
		// 			.current{
		// 				display:block;
		// 			}
		// 		}
		// 	}
		// 	>img{
		// 		width:14%;
		// 		position: absolute;
		// 		top:50%;
		// 		// transform:translateY(-45%);
		// 	}
		// 	.prev{
		// 		left:2%;
		// 		transform:translate(-50%,-50%);		
		// 		-webkit-transform:translate(-50%,-50%);
		// 		-moz-transform:translate(-50%,-50%);
		// 		-o-transform:translate(-50%,-50%);		
		// 	}
		// 	.next{
		// 		right:3%;
		// 		transform:translate(50%,-50%);
		// 		-webkit-transform:translate(50%,-50%);
		// 		-moz-transform:translate(50%,-50%);
		// 		-o-transform:translate(50%,-50%);
		// 	}
		// }
	}

	.page_five{
		z-index: 3;
		.five_tit{
			width:110%;
			margin-left:-10%;
			margin-top:-6%;
			position: relative;
			z-index: 2;
		}
		.sence_box{
			width: 94%;
			height:76%;
			background:url(../image/white_bg.png) no-repeat top center;
			background-size:100% 100%;
			position: absolute;
			left:3%;
			top:8%;
			.sence{
				display:block;
				width:92%;
				// height:85%;
				margin-left:4%;
				margin-top:25%;
				background-color:#888484;
			}
			.sence_btn{
				width:94%;
				position: absolute;
				left:3%;
				bottom:-4%;
				.upload_box{
					width:68%;
					margin-left: 14%;
					// float: left;
					background:url(../image/upload_pic.png) no-repeat top center;
					background-size:100% 94%;
					.upload_pic{
						width:100%;
						position: relative;
						left:0px;
						top:0px;
						@include opacity(0);
					}
					.upload_input{
						width:68%;
						height:100%;
						position: absolute;
						top:0px;
						left:50%;
						transform: translateX(-50%);
						z-index: 2;
						@include opacity(0);
					}
				}
				.confirm{
					width:27%;
					float:right;
				}
			}
		}
		.choosetool{
			width:100%;
			height:100%;
			text-align:center;
			position: absolute;
			left:0px;
			top:0px;
			z-index:999999;
			display:none;
			.picbox{
				width: 50%;
				z-index: 19;
				position: relative;
				left:50%;
				top:30%;
				transform: translateX(-50%);
			}
			.takepic_box{
				background: url(../image/takepic.png) no-repeat top center;
				background-size: 100%;
				.takepic{
					width:100%;
					position: relative;
					left:0px;
					top:0px;
					@include opacity(0);
				}
				.takepic_input{
					width:100%;
					position: absolute;
					top:0px;
					left:0px;
					z-index: 2;
					@include opacity(0);
				}
				
			}
			.havepic_box{
				background: url(../image/havepic.png) no-repeat top center;
				background-size: 100%;
				.havepic{
					width:100%;
					position: relative;
					left:0px;
					top:0px;
					@include opacity(0);
				}
				.havepic_input{
					width:100%;
					position: absolute;
					top:0px;
					left:0px;
					z-index: 2;
					@include opacity(0);
				}
				
			}
			.choosetool_bg{
				width:100%;
				height:100%;
				position: absolute;
				left:0px;
				top:0px;
				background-color:#000;
				@include opacity(0.5);
				z-index:9;
			}
		}
		.uploadbox{
			width:100%;
			height:100%;
			text-align:center;
			position: absolute;
			left:0px;
			top:0px;
			z-index:999999;
			display:none;
			.uploadbg{
				width:100%;
				height:144%;
				position: absolute;
				left:0px;
				top:0px;
				background-color:#000;
				@include opacity(0.5);
				z-index:9;
			}
			.uploadtxt{
				display:inline-block;
				margin-top:75%;
				transform:translateY(-50%);
				font-size:14px;
				position: relative;
				z-index:19;
				color:#fff;
			}
		}
		.five_next{
			display: none;
		}
	}

	.page_six{
		z-index: 2;
		.six_blingbg{	
			width:100%;
			height:100%;		
			background:url(../image/blings.png) no-repeat top center;
			background-size:100% 100%;
			.gnr_bg{
				width:100%;
				height:80%;
				background:url(../image/gnr_bg.png) no-repeat top center;
				background-size:100% 100%;	
				position: relative;
				.six_pic{
					display:inline-block;
					margin:10%;
					width:72%;
					position: absolute;
					left:1.5%;
					top:9%;
					// height:70%;

					
				}
				.six_pic_txt{
					display:inline-block;
					margin:10%;
					width:72%;
					position: absolute;
					left:1.5%;
					bottom:7%;
					// height:70%;

					
				}
			}
			.six_btn{
				width:86%;
				margin-left:7%;
				img{
					display:inline-block;
					width:45%;
				}
				.renew{
					
				}
				.enter_greeting{
					float:right;
				}
			}
		}
	}

	.page_seven{
		z-index: 1;
		.container_box{
			// padding-bottom:150%;
			width:100%;
			// height:100%;
			background:url(../image/bg.jpg) no-repeat top center;
			background-size:100% 100%;	
			.tanmu{
				width:100%;
				// height:80%;
				// padding-bottom: 130%;
				background:url(../image/gnr_bg.png) no-repeat top center;
				background-size:100% 100%;	
				position: relative;
				.six_pic{
					display:inline-block;
					// margin:10%;
					width:72%;
					// position: absolute;
					// left:1.5%;
					// top:8%;
					// height:70%;
					margin-left: 11.5%;
					margin-top: 21%;
				}
				.six_pic_txt{
					display:inline-block;
					margin:10%;
					width:72%;
					// position: absolute;
					// left:1.5%;
					// bottom:7%;
					// height:70%;

					margin-left: 11%;
					margin-top: 2%;
					padding-bottom: 12%;
				}
				.tanmu_box{
					display:inline-block;
					width:100%;
					height:100%;
					position: absolute;
					left:0%;
					top:2%;
					overflow-x: hidden;
					span{
						// display:block;
						padding:5px 8px;
						border-radius:50px;
						position: absolute;
						transform: translateX(-100%);
						font-size: 15px;
						background-color:#feaef6;
						.loveimg{
							width:5%;
						}
					}
					.scrollleft{
						animation: scrollleft_animation 8s ease-in;
						-moz-animation: scrollleft_animation 8s ease-in;
						-o-animation: scrollleft_animation 8s ease-in;
						-webkit-animation: scrollleft_animation 8s ease-in;
					}
					.spanbg1{
						background-color:#feaef6;
					}
					.spanbg2{
						background-color:#fff;
					}
				}
			}
			.input_box{
				width:80%;
				height:15%;
				margin-left:10%;
				.inputbg{
					width:78%;
					height:55%;
					float:left;	
					background:url(../image/input_bg.png) no-repeat top center;
					background-size:100% 100%;
			        // padding-bottom: 8%;
					margin-left: 0%;
					input{
						width: 100%;
						height:40px;
						font-size: 16px;
						text-indent: 10px;
						border:none;
						outline:none;
						background:none;
					}
				}
				.generate{
				    width: 15%;
				    vertical-align: middle;
				    margin-left:5%;
				}
			}
		}
		.final_container{
			width:100%;
			height:100%;
			position: absolute;
			top: 0px;
			display: none;
			.final_bg{
				position: absolute;
				width:100%;
				height:100%;
				background-color: #000;
				@include opacity(0.5);
			}
			.final_txt{
				font-size: 16px;
				color:#fff;
				position: relative;
				z-index: 19;
				top:50%;
				left:40%;
				display: none;
			}
			.final_box{
				position: absolute;
				bottom: -5px;
				display: none;
				.downloadpic{
					display: inline-block;
					.press_save{
						width:100%;
					}
				}
				.final_picbox{
					position: absolute;
					width: 76%;
					top: -430%;
					left: 12%;
					overflow: hidden;
					z-index: 2;
					height: 450%;
					.final_pic{
						width:100%;
						position: relative;
						top: 95%;
						z-index: 4;	
					}
				}
			}
		}
	}
	.showpage{
		// display: block;  
		z-index: 9; 
		animation: showpage 1s ease;
		-moz-animation: showpage 1s ease;
		-o-animation: showpage 1s ease;
		-webkit-animation: showpage 1s ease;
	}
}



.swiper-slide{
	width:100%;
	height:100%;
	position: absolute;
	left:0px;
	top:0px;
	// overflow: hidden;
	// display:none;
	img{
		width:100%;
		// height:100%;
	}
}
.current{
	display:block;
}




/*page-two  loading-bar*/
@keyframes loadingbar {
	0% {
		width:10%;
	}	 
	100% {
		width:98.1%;
	}
}
@-webkit-keyframes loadingbar {
	0% {
		width:10%;
	}	 
	100% {
		width:98.1%;
	}
}
@-moz-keyframes loadingbar {
	0% {
		width:10%;
	}	 
	100% {
		width:98.1%;
	}
}
@-o-keyframes loadingbar {
	0% {
		width:10%;
	}	 
	100% {
		width:98.1%;
	}
}



@keyframes scalelarge {
	0% {
	    transform: translate(-50%, -50%) scale(1.0);
	    -webkit-transform: translate(-50%, -50%) scale(1.0);
	}
	100% {
	    transform: translate(-50%, -50%) scale(1.1);
	    -webkit-transform: translate(-50%, -50%) scale(1.1);
	    opacity: 0;
	}
}
@-webkit-keyframes scalelarge {
	0% {
	    transform: translate(-50%, -50%) scale(1.0);
	    -webkit-transform: translate(-50%, -50%) scale(1.0);
	}
	100% {
	    transform: translate(-50%, -50%) scale(1.1);
	    -webkit-transform: translate(-50%, -50%) scale(1.1);
	    opacity: 0;
	}
}
@-moz-keyframes scalelarge {
	0% {
	    transform: translate(-50%, -50%) scale(1.0);
	    -webkit-transform: translate(-50%, -50%) scale(1.0);
	}
	100% {
	    transform: translate(-50%, -50%) scale(1.1);
	    -webkit-transform: translate(-50%, -50%) scale(1.1);
	    opacity: 0;
	}
}
@-o-keyframes scalelarge {
	0% {
	    transform: translate(-50%, -50%) scale(1.0);
	    -webkit-transform: translate(-50%, -50%) scale(1.0);
	}
	100% {
	    transform: translate(-50%, -50%) scale(1.1);
	    -webkit-transform: translate(-50%, -50%) scale(1.1);
	    opacity: 0;
	}
}


/*页面*/
@keyframes showpage {
    0% {
        transform: translateY(100%);
    }    
    100% {
        transform: translateY(0%);
    }
}
@-webkit-keyframes showpage {
    0% {
        transform: translateY(100%);
    }    
    100% {
        transform: translateY(0%);
    }
}
@-moz-keyframes showpage {
    0% {
        transform: translateY(100%);
    }    
    100% {
        transform: translateY(0%);
    }
}
@-o-keyframes showpage {
    0% {
        transform: translateY(100%);
    }    
    100% {
        transform: translateY(0%);
    }
}



// scrollleft_animation
@keyframes scrollleft_animation {
    0% {
        transform: translateX(300%);
    }    
    100% {
        transform: translateX(-100%);
    }
}
@-webkit-keyframes scrollleft_animation {
    0% {
        transform: translateX(300%);
    }    
    100% {
        transform: translateX(-100%);
    }
}
@-moz-keyframes scrollleft_animation {
    0% {
        transform: translateX(300%);
    }    
    100% {
        transform: translateX(-100%);
    }
}
@-o-keyframes scrollleft_animation {
    0% {
        transform: translateX(300%);
    }    
    100% {
        transform: translateX(-100%);
    }
}




